<template>
  <div class="main">
    <div style="clear:both"></div>
    <div class="login" v-if="!isLogin">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="短信登录/注册" name="first">
          <div class="login-rule">登录注册表示同意 豆瓣使用协议、隐私政策</div>
          <div class="phone-wrapper">
            <el-input v-model="phone" placeholder="请输入手机号" class="phoneNumber">
              <template slot="prepend">手机号</template>
            </el-input>
            <el-input v-model="validate" placeholder="请输入验证码">
              <el-button slot="append" @click="getCode">获取验证码</el-button>
            </el-input>
            <el-button type="primary" plain class="login-btn" @click="logon">登录</el-button>
          </div>
          <div class="remenber">
            <el-checkbox v-model="checked">下次直接登录</el-checkbox>
            <span @click="noValidate" class="noValidate">没收到验证码？</span>
          </div>
          <div class="hr">第三方登录</div>
          <div class="other-login">
            <span class="weixin-login"></span>
            <span class="weibo-login"></span>
          </div>
        </el-tab-pane>

        <el-tab-pane label="密码登录" name="second">
          <div class="phone-wrapper">
            <el-input v-model="account" placeholder="请输入账号/邮箱/手机号" class="phoneNumber"></el-input>
            <div class="cue">{{errors.account}}</div>
            <el-input v-model="password" placeholder="请输入密码" type="password" style="position:relative">
                
            </el-input>
   
            <div class="cue">{{errors.password}}</div>
            <el-button type="primary" plain class="login-btn" @click="pswLogon">登录</el-button>
          </div>
          <div class="remenber">
            <el-checkbox v-model="checked">下次直接登录</el-checkbox>
            <span @click="forgetPwd" class="noValidate">忘记密码？</span>
          </div>

          <div class="hr">第三方登录</div>
          <div class="other-login">
            <span class="weixin-login"></span>
            <span class="weibo-login"></span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else style="text-align:center;font-size:20px;background:#eeeee;width:100%;margin-top:120px">
      <div style = "">
          <span>已登录</span>
      </div>
    </div>
  </div>
</template>


<script>
import Cookies from 'js-cookie';
import md5 from 'js-md5'
import request from '../../api/request'
import {mapState} from 'vuex'
export default {
  data() {
    return {
      activeName: "first",
      phone:'',    //手机号
      validate:'',  //验证码
      account:Cookies.get('username')?Cookies.get('username'):'', //用户名
      password:Cookies.get('username')?Cookies.get('password'):'',  //密码
      checked:false   //是否记住密码
    };
  },
  computed:{
      errors(){
          return this.$vuerify.$errors;   //错误信息
      },
      ...mapState({
        isLogin:state => state.user.isLogin
      })
  },
  vuerify:{
    account:{
        test:/^[a-zA-Z0-9_-]{4,16}$/,
        message: '账号至少4-6位'
    },
    password:{
        test:/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*$/,
        message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字'
    }
  },
  methods: {
    handleClick(tab, event) {   //tabs钩子函数
      //console.log(tab, event);
    },
    getCode(){//获取验证码
        console.log(this.loginInfo.phone)
    },
    noValidate(){ //没收到验证码

    },
    logon(){ //手机验证码登录

    },
    pswLogon(){ //账号密码登录
        console.log(this.$vuerify.check())
        if(this.$vuerify.check()){
            if(this.checked == true){  //记住密码   
                Cookies.set('password',md5(this.password),{expires: 7})
                Cookies.set('username',this.account,{expires: 7})
            }
            let userInfo = {password:md5(this.password),username:this.account}   //用户信息
            this.$store.dispatch('Login',userInfo).then(()=>{   //登录操作
                this.$store.dispatch('GetUserInfo',this.$store.state.token).then((rs)=>{
                // console.log(encodeURI(window.location.href).split('?')[1].split('=')[1])
                if(decodeURIComponent(window.location.href).indexOf('?')>-1 && decodeURIComponent(window.location.href).indexOf('dir')>-1){
                  this.$router.push({ path: decodeURIComponent(window.location.href).split('?')[1].split('=')[1]})
                }else{
                  this.$router.push({path:'/'})
                }
                
                
              })
                
            }).catch((error) => {
                console.log(error)
            })
        }else{
            return false
        }
    },
    forgetPwd(){//忘记密码

    }
  },
  watch:{
      checked(newVal,oldVal){
          
      }
  }
};
</script>

<style lang="stylus">
$border = 1px solid #eeeeee;
$blue = #409EFF;

.login {
  padding: 0;
  margin: 0;
  width: 380px;
  height: 500px;
  margin: 50px auto;
  border: $border;
  border-radius: 4px;
  padding: 15px;

  .login-rule {
    font-size: 12px;
    color: #409EFF;
  }

  .phone-wrapper {
    margin-top: 10px;
    
    .el-input {
      margin-top: 25px;
    }
    
    .phoneNumber {
      width: 100%;
    }
    .cue{
        font-size 12px
        color red
        margin-top 5px
    }
  }

  .login-btn {
    width: 100%;
    margin-top: 20px;
    background: rgba(66, 189, 86, 0.5);
    border: none;

    span {
      color: white;
    }
  }

  .remenber {
    font-size: 14px;
    color: rgba(66, 189, 86, 0.5);
    margin-top: 20px;

    .noValidate {
      margin-left: 130px;
      cursor: pointer;
    }
  }

  .el-button--primary.is-plain {
    background: rgba(66, 189, 86, 0.5);
  }

  .login-btn:hover {
    background: rgba(66, 189, 86, 0.5);
    border: none;
  }

  .other-login {
    width: 100%;
    height: 50px;
    margin-top: 40px;

    .weixin-login {
      display: inline-block;
      height: 40px;
      width: 40px;
      margin-left: 140px;
      background: url('./images/weixin.png') no-repeat;
      background-size: 40px 40px;
    }

    .weibo-login {
      display: inline-block;
      height: 40px;
      width: 40px;
      margin-left: 20px;
      background: url('./images/weibo.png') no-repeat;
      background-size: 40px 40px;
    }
  }

  .hr {
    text-align: center;
    font-size: 12px;
    margin-top: 40px;
  }

  .hr::before {
    content: '';
    background: #ddd;
    display: inline-block;
    width: 36%;
    height: 1px;
    margin-bottom: 3px;
    margin-right: 8px;
  }

  .hr::after {
    content: '';
    background: #ddd;
    width: 36%;
    display: inline-block;
    height: 1px;
    margin-bottom: 3px;
    margin-left: 8px;
  }

  .el-tabs__nav {
    margin-top: 20px;
  }

  .tabs {
    .el-tabs__item.is-active {
      color: black;
      font-weight: bold;
      font-size: 18px;
    }

    .el-tabs__item:hover {
      color: black;
    }
  }
}
</style>


